<template>
  <div>
    <!-- header -->
    <div class="header">
      <div>线上热门搜索</div>
      <div><i class="el-icon-more"></i></div>
    </div>
    <!-- main -->
    <div class="main">
      <!-- 两个图表 -->

      <el-row :gutter="20">
        <el-col :span="12"><search-users /></el-col>
        <el-col :span="12"><search-counter /></el-col>
      </el-row>

      <!-- 一个排名表单 -->
      <div class="search-rank"><search-rank></search-rank></div>
      <!-- 分页 -->
      <div class="search-pagi"><search-pagi></search-pagi></div>
    </div>
    <!-- footer -->
  </div>
</template>

<script>
import SearchUsers from "./SearchUsers.vue";
import SearchCounter from "./SearchCounter.vue";
import SearchRank from "./SearchRank.vue";
import SearchPagi from "./SearchPagi.vue";
export default {
  components: {
    SearchUsers,
    SearchCounter,
    SearchRank,
    SearchPagi,
  },
};
</script>

<style lang="less" scoped>
.header {
  height: 30px;
  display: flex;
  justify-content: space-between;
  padding-bottom: 5px;
  margin-bottom: 5px;
  border-bottom: 1px solid rgba(201, 201, 201, 0.3);
}
</style>